import React, {useState} from 'react'
import { Descriptions, Divider } from 'antd';
const Detail = (props: any)=> {
    const [activeIndex, setActiveIndex] = useState<number>(1); // active索引
    const customerList = [props.detailInfo]
    const changeTab = (e: any)=>{ // 切换查看信息 
      setActiveIndex(e)
    }
    return (
      <div className='Sanke'>
        <div className='topBar'>
          {
            customerList.map((val, i)=>{
            return <span key={i} className={i+1 === activeIndex ? 'active' : ''} >{`${val.name}(${i === 0 ? '旅客' : '同住人'})`}</span>
            })
          }
        </div>
        <div>
          <Descriptions title={activeIndex === 1 ? "旅客信息" : "同住人信息"} bordered>
            <Descriptions.Item label="姓名">{customerList[activeIndex-1].name}</Descriptions.Item>
            <Descriptions.Item label="性别">{customerList[activeIndex-1].gender}</Descriptions.Item>
            <Descriptions.Item label="证件类型">身份证</Descriptions.Item>
            <Descriptions.Item label="民族">{customerList[activeIndex-1].nation}</Descriptions.Item>
            <Descriptions.Item label="出生日期">{customerList[activeIndex-1].birthday}</Descriptions.Item>
            <Descriptions.Item label="户籍地市区县">{customerList[activeIndex-1].address}</Descriptions.Item>
            <Descriptions.Item label="核验/认证结果" span={6}>成功</Descriptions.Item>
          </Descriptions>    
          <Divider/>
          <Descriptions title='入住信息'>
            <Descriptions.Item span={2} label="入住酒店名称">睿沃智慧酒店</Descriptions.Item>
            <Descriptions.Item label="房号">{customerList[activeIndex-1].roomNum}</Descriptions.Item>
            <Descriptions.Item span={2} label="核验/认证结果">{customerList[activeIndex-1].startTime} 有证认证  /  认证成功</Descriptions.Item>
            <Descriptions.Item label="入住状态">{customerList[activeIndex-1].roomStatus}</Descriptions.Item>
            <Descriptions.Item span={2} label="入住时间">{customerList[activeIndex-1].startTime}</Descriptions.Item>
            <Descriptions.Item label="离店时间">{customerList[activeIndex-1].endTime}</Descriptions.Item>
          </Descriptions>    
          <Divider/>                 
        </div>
        <div>
          <h3>照片</h3>
          <div>
            <div className='cardPhoto'>
              <img src={customerList[activeIndex-1].photo} alt=""/>
              <p>身份证照片</p>
            </div>
            <div className='cardPhoto'>
              <img src={customerList[activeIndex-1].imgNow} alt=""/>
              <p>现场照片</p>
            </div>              
          </div>          
        </div>
      </div>
    )
}
export default Detail
